<script lang="ts" setup >
import { ElMessage } from 'element-plus';
import { tr } from 'element-plus/es/locale/index.mjs';
import type { Ref } from 'vue';
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
let router = useRouter()
let account: Ref<string> = ref('')
let psw: Ref<string> = ref('')
let psw2: Ref<string> = ref('')
let userarr1: Ref<any[]> = ref([])
let f2: Ref<boolean> = ref(false)
let f3: Ref<boolean> = ref(false)
let f4: Ref<boolean> = ref(false)
let f5: Ref<boolean> = ref(false)
let f6: Ref<boolean> = ref(false)
let f7: Ref<boolean> = ref(false)
function enroll() {


    for (let i = 0; i < userarr1.value.length; i++) {
        if (userarr1.value[i].tel == account.value) {
            ElMessage.success('该账号已注册过')
        }
    }

    if (!localStorage.getItem('userarr')) {
        console.log(1111);
    }
    else {
        userarr1.value = JSON.parse(String(localStorage.getItem('userarr')))
    }
    userarr1.value.push({
        tel: account,
        psw: psw,
        userid: '',
        token: ''
    })

    console.log(userarr1.value[0].tel, account);
    localStorage.setItem('userarr', JSON.stringify(userarr1.value))
    // router.push('/login')
}
const flag = computed(() => {
    if (f2.value == true && f3.value == true && f4.value == true && f5.value == true) {
        return true
    }
    else {
        return false
    }
})
function login() {
    router.push('/login')
}

function changeacc() {
    if (/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(account.value)) {
        f2.value = true
    }
    if (account.value.length >= 12) {
        f7.value = true
        if (f7.value) {
            if (/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(account.value)) {
                f6.value = false
            }
            else {
                f6.value = true
            }
        }
    }
    else {
        if (f7.value) {
            if (/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(account.value)) {
                f6.value = false
            }
            else {
                f6.value = true
            }
        }
    }
}
function changepsw() {
    if (psw.value.length >= 6) {
        f3.value = true
    }
    else {
        f3.value = false
    }
    changepsw2()
}
function changepsw2() {
    if (psw.value == psw2.value) {
        f4.value = true
    } else {
        f4.value = false
    }
}
function changebtn() {
    f5.value = !f5.value
}
</script>
<template>
    <img src="../../assets/img/sp.jpg" alt="">
    <div style="position: fixed; margin: 30px 40px;">
        <h1 style="color: white;">我要注册</h1>
        <div style="font-size: 20px;margin-bottom: 40px;color: white;">欢迎注册游戏助手</div>
        <div>
            <el-tooltip class="box-item" :disabled="f2" effect="dark" content="请输入11位以13-19开头的电话号码" placement="top-start">
                <el-input @input="changeacc" v-model="account" style="height: 50px;" placeholder="请输入账号"></el-input>
            </el-tooltip>
            <div style="color: rgb(255, 204, 0);font-size: 14px;margin-bottom: 20px;"><b v-show="f6">请输入11位以13-19开头的电话号码</b>
            </div>
            <el-tooltip class="box-item" :disabled="f3" effect="dark" content="请输入6位以上的密码" placement="top-start">
                <el-input @input="changepsw" v-model="psw" show-password placeholder="请输入密码"
                    style="margin-bottom: 20px;height: 50px;"></el-input>
            </el-tooltip>
            <el-tooltip class="box-item" :disabled="f4" effect="dark" content="密码不一致" placement="top-start">
                <el-input @input="changepsw2" v-model="psw2" show-password placeholder="请再次确认输入密码"
                    style="height: 50px;"></el-input>
            </el-tooltip>
        </div>
        <el-tooltip class="box-item" :disabled="flag" effect="dark" content="请正确输入信息和勾选：同意《服务条款》和App《用户隐私》"
            placement="top-start">
            <el-button color="#000" style="margin-top: 40px;font-size: 17px;width: 100%;height: 50px;" @click="enroll"
                :disabled="!flag">注册</el-button>
        </el-tooltip>
        <div style="color: white;display: flex;justify-content: space-between;margin-top: 20px;">
            <span></span><span>我有账户，我要<b @click="login">登录</b></span>
        </div>
        <div style="color:white;margin-top:30px;font-size:13px"><input @click="changebtn" :checked="f5"
                type='radio' />同意《服务条款》和App《用户隐私》
        </div>
    </div>
</template>
<style lang="scss" scoped>
img {
    position: fixed;
    height: 100%;
    width: 100%;
    // background-color:rgba(0,0,0,1)
    // opacity: 0.9;
    filter: brightness(0.7);
}
</style>